<template>
  <page-layout :avatar="currUser.avatar">
    <template>
      <div class="charts">
        <div class="chart">
          <div class="top-filter flex-between">
            <div
              class="strong fs16 mrSemiBold flex-center"
              style="color: #110000"
            >
              <div class="outer">
                <div class="inner"></div>
              </div>
              文章创建统计
            </div>
          </div>
          <div ref="chart" class="chart-ele"></div>
        </div>
        <div class="chart">
          <div class="top-filter flex-between">
            <div
              class="strong fs16 mrSemiBold flex-center"
              style="color: #110000"
            >
              <div class="outer">
                <div class="inner"></div>
              </div>
              文章分类统计
            </div>
          </div>
          <div ref="chartPie" class="chart-ele"></div>
        </div>
      </div>
    </template>
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import { mapState } from "vuex";
import moment from "moment";
import { getExpense } from "../../../service.js";

export default {
  name: "DashBoard",
  components: { PageLayout },
  i18n: require("./i18n"),
  data() {
    return {
      allData: [],
      loading: false,
      title: "医废信息",
      wasteInfoTypeFilter: [],
      wasteInfoType: [],
      allWasteInfo: [],
      allUser: []
    };
  },
  watch: {
    $route(to) {
      if (to.path === '/page/dashboard') {
        this.init()
      }
    }
  },
  computed: {
    ...mapState("account", { currUser: "user" }),
    ...mapState("setting", ["lang"]),
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 默认展示最近三十天
      getExpense({
        page: 1,
        pageSize: 1000
      }).then(async (res) => {
        console.log(res)
        this.allData = res.data.data;
        
        this.$nextTick(() => {
          this.initChart();
        });
      });
    },
    initChart() {
      let chartPie = this.$refs.chartPie;
      let chart = this.$refs.chart;
      const myChartPie = this.$echarts.init(chartPie);
      const myChart = this.$echarts.init(chart);
      let xData = this.wasteInfoType.map(v => v.recycle_time)
      xData = Array.from(new Set(xData))
      let seriesDataLine = []
      for (let item of xData) {
        seriesDataLine.push(this.wasteInfoType.filter(v => v.recycle_time === item).length)
      }
      // 绘制折线图
      const optionLine = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "医废接收数统计",
            type: "line",
            smooth: true,
            data: seriesDataLine
          },
        ],
      };
      myChart.setOption(optionLine);

      let types = this.allData.map((v) => v.type);
      types = Array.from(new Set(types));
      let seriesData = []
      for (let item of types) {
        seriesData.push({
          name: item,
          value: this.wasteInfoType.filter(v => v.classification === item).length
        })
      }
      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "文章分类统计",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: seriesData
          },
        ],
      };
      myChartPie.setOption(option);
      setTimeout(() => {
        myChartPie.resize();
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChartPie.resize();
        myChart.resize();
      });
    },
    changeRadio(ev) {
      switch (ev) {
        case "a":
          this.dateRange = [
            moment(
              moment().subtract(29, "days").format(this.dateFormat),
              this.dateFormat
            ),
            moment(moment().format(this.dateFormat), this.dateFormat),
          ];
          break;
        case "b":
          this.dateRange = [
            moment(
              moment().subtract(89, "days").format(this.dateFormat),
              this.dateFormat
            ),
            moment(moment().format(this.dateFormat), this.dateFormat),
          ];
          break;
        case "c":
          this.dateRange = [
            moment(
              moment().subtract(179, "days").format(this.dateFormat),
              this.dateFormat
            ),
            moment(moment().format(this.dateFormat), this.dateFormat),
          ];
          break;
      }

      this.initChart();
    },
    getCurrentStyle(current) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #4A5BFF";
        style.borderRadius = "50%";
      }
      return style;
    },
  }
};
</script>

<style lang="less" scoped>
@import "index";
.charts {
  display: flex;
  gap: 20px;

  .chart {
    width: 50%;
  }
}
</style>
